<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顶部广告示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .ad-container {
            position: relative;
            width: 100%;
            height: 0;
            overflow: hidden;
            transition: height 1s ease;
        }

        .ad-container.show {
            height: 800px;
        }

        .ad-image {
            width: 100%;
            height: 800px;
            object-fit: cover;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 100;
        }

        .close-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
    </style>
</head>
<body>
    <div class="ad-container" id="adContainer">
        <img src="images/img.jpg" alt="广告图片" class="ad-image">
        <button class="close-btn" id="closeBtn">X</button>
    </div>

    <div class="content">
        <h1>欢迎来到顶部广告示例</h1>
        <p>这是一个顶部广告示例，5秒后自动隐藏。</p>
        <!-- 这里可以添加更多内容 -->
    </div>

    <script>
        // 获取广告容器和关闭按钮元素
        const adContainer = document.getElementById('adContainer');
        const closeBtn = document.getElementById('closeBtn');

        // 显示广告
        setTimeout(() => {
            adContainer.classList.add('show');
        }, 1000); // 延迟1秒显示广告

        // 5秒后自动隐藏广告
        setTimeout(() => {
            adContainer.classList.remove('show');
        }, 6000); // 5秒后隐藏广告

        // 点击关闭按钮时隐藏广告
        closeBtn.onclick = function() {
            adContainer.classList.remove('show');
        };
    </script>
</body>
</html>